$(document).ready(function(){

    var currentPosition = 0;
    var slideWidth = 560;
    var slides = $('.slide');
    var numberOfSlides = slides.length;

    //Remove the scrollbar with JS
    $('#slidesContainer').css('overflow', 'hidden');

    //Wrap all the .slides in #slideInnder
    slides
    .wrapAll('<div id="slideInner"></div>')
    //Display all the slides horizontally
    .css({
        'float' : 'left',
        'width' : slideWidth
    });

    //Make sure that the new #slideInner has the same width as all the slides together
    $('#slideInner').css('width', slideWidth * numberOfSlides);



    //Insert navigation arrows
    $('#slideshow')
        .append('<span class="control" id="leftControl"> Move left</span>')
        .append('<span class="control" id="rightControl"> Move right</span>');


    //Hide navigation arrows on first load
    manageControls(currentPosition);

    //Event listeners for both navigation arrows

    $('.control')
    .bind('click', function(){

    // Determine new position
    currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

    // Hide / show controls
    manageControls(currentPosition);

    // Move slideInner using margin-left
    $('#slideInner').animate({
                              'marginLeft' : slideWidth*(-currentPosition)
                            });
  });

    /*
     * Checks the current position and deterines thereby
     * which arrows need to be displayed
     */

    function manageControls(position) {

        // If first slide is current:
        if(position == 0) $('#leftControl').hide();
        else $('#leftControl').show();

        if(position == numberOfSlides-1) $('#rightControl').hide();
        else $('#rightControl').show();

    }
});